<template>
  <div class="">
    <div class="relative mx-auto max-w-7xl">
      <div class="lg:grid-cols-4 lg:py-6 lg:gap-10 grid grid-cols-1 gap-4 py-4">
        <div class="lg:grid h-fit sticky top-[8rem] hidden col-span-1">
          <div class="flex flex-col">
            <div
              class="hovdrs flex gap-3 justify-between items-center py-3 pr-4 cursor-pointer"
              v-for="item in tabList"
              :key="item.type"
              @click="changeTab(item)"
              :class="type == item.type ? 'selectbackground' : 'text-[#666666]'"
            >
              <template>
                <div class="flex gap-3 items-center">
                  <div class="size-[1.13rem]">
                    <img
                      :src="$globalFn.imgPrefixUrl(item.pic_image || '')"
                      alt="Category active icon"
                      title="Selected category"
                      class="size-full flex-none"
                      v-if="type == item.type"
                    />
                    <img
                      :src="$globalFn.imgPrefixUrl(item.pic_image2 || '')"
                      alt="Category icon"
                      title="Category thumbnail"
                      class="size-full flex-none"
                      v-else
                    />
                  </div>
                  <h2 class="font-medium text-[0.88rem] line-clamp-1 capitalize">
                    {{ item.name }}
                  </h2>
                </div>
                <!-- <span class="font-semibold text-[0.88rem] text-[#b3b3b3]">
                  {{ item.num || 0 }}
                </span> -->
              </template>
            </div>
            <!-- <div
              class="hovdrs flex gap-3 justify-between items-center py-3 pr-4 w-full cursor-pointer"
              v-for="item in tabList"
              :key="item.type"
              @click="changeTab(item)"
              :class="
                type == item.type ? 'selectbackground ' : 'text-[#666666]'
              "
            >
              <div class="flex gap-3 items-center w-full">
                <div class="size-[1.13rem]">
                  <img
                     :src="item.icon"
                    loading="lazy"
                    :alt="item.icon"
                    class="size-full flex-none"
                  />
                </div>
                <span
                  class="font-medium text-[0.88rem] line-clamp-1 capitalize"
                >
                  {{ item.name }}
                </span>
              </div>
            </div> -->
          </div>
        </div>
        <div class="max-lg:flex hidden overflow-x-scroll flex-nowrap gap-2 items-center pr-4" ref="tabScroll">
          <div @click="changeTab(item)" v-for="item in tabList" :key="item.type" class="relative px-4 pb-1 cursor-pointer" :ref="'tab-' + item.type">
            <span
              :class="type == item.type ? 'font-medium text-[1rem] text-[#141414] dd' : 'font-normal text-[0.88rem] text-[#999999]'"
              class="text-nowrap"
            >
              {{ item.name }}
            </span>
          </div>
        </div>
        <!-- <div class="px-4">
          <hr />
        </div> -->
        <div class="lg:col-span-3 col-span-1">
          <NuxtChild />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  let userAccountIcon = 'https://cd.sealmg.com/assets/img/user-account.png'
  let userOrderIcon = 'https://cd.sealmg.com/assets/img/user-order.png'
  let userCardpwdIcon = 'https://cd.sealmg.com/assets/img/user-cardpwd.png'
  let userCollectIcon = 'https://cd.sealmg.com/assets/img/user-collect.png'
  let userNoticeIcon = 'https://cd.sealmg.com/assets/img/user-notice.png'
  // \
  export default {
    layout: 'newsHome',
    name: 'user',
    key(route) {
      return route.fullPath
    },
    head() {
      return {
        title: 'SEALMG - User Center | Manage Your Account',
        meta: [
          {
            hid: 'description',
            name: 'description',
            content: 'Access your SEALMG account dashboard. View orders, manage profile, check card passwords, browse collections and notifications.'
          }
        ]
      }
    },
    data() {
      return {
        type: -1, // 当前选中的tab类型
        activeIndex: '1', // 激活的索引
        tabList: [
          {
            id: 'account', // 账户ID
            name: this.$t('userPanel.account'), // 账户名称
            pic_image2: userAccountIcon, // 账户图标
            pic_image: require('~/assets/img/mobile/user-account.png'), // 账户图标
            type: 1 // 账户类型
          },
          {
            id: 'order', // 订单ID
            name: this.$t('userPanel.order'), // 订单名称
            pic_image2: userOrderIcon, // 账户图标
            pic_image: require('~/assets/img/mobile/user-order.png'), // 账户图标
            type: 2 // 订单类型
          },
          {
            id: 'cardpwd', // 卡密ID
            name: this.$t('userPanel.cardpwd'), // 卡密名称
            pic_image2: userCardpwdIcon, // 账户图标
            pic_image: require('~/assets/img/mobile/user-cardpwd.png'), // 账户图标
            type: 3 // 卡密类型
          },
          {
            id: 'collect', // 收藏ID
            name: this.$t('userPanel.collect'), // 收藏名称
            pic_image2: userCollectIcon, // 账户图标
            pic_image: require('~/assets/img/mobile/user-collect.png'), // 账户图标
            type: 4 // 收藏类型
          },
          {
            id: 'notice', // 通知ID
            name: this.$t('userPanel.notice'), // 通知名称
            pic_image2: userNoticeIcon, // 账户图标
            pic_image: require('~/assets/img/mobile/user-notice.png'), // 账户图标
            type: 5 // 通知类型
          }
        ]
      }
    },

    // 监听路由变化,优化性能
    watch: {
      '$route.query.type': {
        handler(newType) {
          this.type = Number(newType) || -1
        },
        immediate: true
      }
    },

    // 服务端获取初始数据
    async asyncData({ query }) {
      return {
        type: Number(query.type) || -1
      }
    },
    methods: {
      // 切换标签页
      changeTab(item) {
        if (this.type === item.type) return
        this.type = item.type
        this.$router.push({
          path: this.localePath(`/user/${item.id}`),
          query: { type: item.type.toString() }
        })

        // 滚动选中项到中间
        this.$nextTick(() => {
          const container = this.$refs.tabScroll
          const selectedTab = this.$refs[`tab-${item.type}`][0]

          if (container && selectedTab) {
            const containerWidth = container.offsetWidth
            const tabWidth = selectedTab.offsetWidth
            const tabLeft = selectedTab.offsetLeft

            // 计算需要滚动的位置，使选中项居中
            const scrollLeft = tabLeft - containerWidth / 2 + tabWidth / 2

            // 使用平滑滚动
            container.scrollTo({
              left: scrollLeft,
              behavior: 'smooth'
            })
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  //不是那么肯定的需要做合计页面能力的，暂时先不做了
  // vkformflex  juc
  //  gird
  //
  //
  //
  //
  //
  //
  .selectbackground {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffebe5 100%) !important;
    border-radius: 0 32px 32px 0;
    color: #ff4e33 !important;
  }
  .hovdrs:hover {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #efefef 100%);
    border-radius: 0 32px 32px 0;
    // color: #ff4e33 !important;
    @apply duration-300 transition-colors;
  }
  // 背景透明
  .el-menu-demo {
    background: transparent;
  }
  // 去除自带的底部border
  .el-menu.el-menu--horizontal {
    border: none;
  }
  .dd::after {
    content: '';
    @apply block  w-4 h-1 bg-[#383838] rounded-full absolute  bottom-0 left-1/2 -translate-x-1/2;
  }
</style>
